<template>
  <teleport to="body">
    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div class="bg-white rounded-card p-8 max-w-md w-full mx-4 transform transition-all duration-300">
        <!-- 关闭按钮 -->
        <div class="flex justify-end mb-4">
          <button 
            @click="$emit('close')"
            class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-500 hover:text-gray-700 transition-colors"
          >
            <span class="text-lg">×</span>
          </button>
        </div>
        
        <!-- 徽章图标 -->
        <div class="text-center mb-6">
          <div class="w-24 h-24 mx-auto rounded-circle overflow-hidden bg-accent-yellow p-3 shadow-card">
            <img 
              :src="`/images/${achievement.icon}_0.jpg`" 
              :alt="achievement.name"
              class="w-full h-full object-cover"
            />
          </div>
        </div>
        
        <!-- 徽章信息 -->
        <div class="text-center mb-6">
          <h2 class="text-2xl font-bold text-text-primary mb-2">{{ achievement.name }}</h2>
          <p class="text-lg text-text-secondary mb-4">{{ achievement.description }}</p>
          
          <!-- 解锁状态 -->
          <div v-if="achievement.unlocked" class="inline-flex items-center space-x-2 bg-accent-green text-white px-4 py-2 rounded-pill">
            <span class="text-sm">✓</span>
            <span class="text-sm font-medium">已获得</span>
          </div>
          <div v-else class="inline-flex items-center space-x-2 bg-gray-200 text-text-secondary px-4 py-2 rounded-pill">
            <span class="text-sm">🔒</span>
            <span class="text-sm font-medium">未获得</span>
          </div>
        </div>
        
        <!-- 获得条件 -->
        <div class="bg-background-cream rounded-input p-4 mb-6">
          <h3 class="text-sm font-bold text-text-primary mb-2">获得条件</h3>
          <p class="text-sm text-text-secondary">
            {{ getConditionDescription() }}
          </p>
          
          <!-- 进度条 -->
          <div class="mt-3">
            <div class="flex items-center justify-between text-sm text-text-secondary mb-1">
              <span>进度</span>
              <span>{{ getCurrentProgress() }} / {{ achievement.condition.value }}</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2">
              <div 
                class="bg-primary-coral rounded-full h-2 transition-all duration-500"
                :style="{ width: `${getProgressPercentage()}%` }"
              ></div>
            </div>
          </div>
        </div>
        
        <!-- 解锁时间 -->
        <div v-if="achievement.unlocked_date" class="text-center text-sm text-text-secondary">
          获得时间：{{ formatDate(achievement.unlocked_date) }}
        </div>
        
        <!-- 操作按钮 -->
        <div class="mt-6 flex justify-center space-x-4">
          <button 
            v-if="!achievement.unlocked"
            @click="shareAchievement"
            class="btn-secondary"
          >
            分享成就
          </button>
          <button 
            @click="$emit('close')"
            class="btn-primary"
          >
            继续学习
          </button>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { useProgressStore } from '@/stores/progress'
import type { Achievement } from '@/types'

interface Props {
  achievement: Achievement
}

const props = defineProps<Props>()

defineEmits<{
  close: []
}>()

const progressStore = useProgressStore()

// 获取当前进度
const getCurrentProgress = (): number => {
  switch (props.achievement.condition.type) {
    case 'poems_learned':
      return progressStore.progress.learned_poems.length
    case 'poems_mastered':
      return progressStore.progress.mastered_poems.length
    case 'favorites':
      return progressStore.progress.favorites.length
    case 'streak':
      return progressStore.progress.current_streak
    default:
      return 0
  }
}

// 获取进度百分比
const getProgressPercentage = (): number => {
  const current = getCurrentProgress()
  const total = props.achievement.condition.value
  return Math.min(100, (current / total) * 100)
}

// 获取条件描述
const getConditionDescription = (): string => {
  const current = getCurrentProgress()
  const total = props.achievement.condition.value
  const remaining = Math.max(0, total - current)
  
  switch (props.achievement.condition.type) {
    case 'poems_learned':
      return `再学习 ${remaining} 首古诗即可获得此徽章`
    case 'poems_mastered':
      return `再掌握 ${remaining} 首古诗即可获得此徽章`
    case 'favorites':
      return `再收藏 ${remaining} 首古诗即可获得此徽章`
    case 'streak':
      return `再连续学习 ${remaining} 天即可获得此徽章`
    default:
      return '完成指定条件即可获得此徽章'
  }
}

// 格式化日期
const formatDate = (dateString: string): string => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', { 
    year: 'numeric',
    month: 'long', 
    day: 'numeric' 
  })
}

// 分享成就
const shareAchievement = () => {
  if (navigator.share) {
    navigator.share({
      title: `我在古诗学习网站获得了「${props.achievement.name}」徽章！`,
      text: `我已经掌握了 ${props.achievement.description}，快来一起学习古诗吧！`,
      url: window.location.origin
    })
  } else {
    // 降级到复制到剪贴板
    const text = `我在古诗学习网站获得了「${props.achievement.name}」徽章！${props.achievement.description}。快来一起学习古诗吧！`
    navigator.clipboard.writeText(text).then(() => {
      alert('成就信息已复制到剪贴板！')
    })
  }
}
</script>

<style scoped>
/* 弹窗出现动画 */
.modal-enter-active,
.modal-leave-active {
  transition: all 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

.modal-content {
  animation: modal-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-appear {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
</style>